<template>
    <div class="app-container">
        <div class="filter-container">
            <div class="filter-container__search"></div>
            <div class="filter-container__ctrl">
                <el-button class="filter-item" style="margin-left: 10px;" type="primary" plain icon="el-icon-edit"
                    @click="handleCreate">
                    添加
                </el-button>
            </div>
        </div>
        <el-table :key="tableKey" v-loading="listLoading" border fit highlight-current-row stripe :data="list"
            id="tableList">
            <el-table-column label="图片">
                <template slot-scope="{ row }">
                    <el-image style="width: 80px; height: 80px" :src="pictureHandle(row.image, 'zoom_middle')"
                        :preview-src-list="[pictureHandle(row.image, 'pc_zoom_middle')]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="描述">
                <template slot-scope="{ row }"> {{ row.description ? row.description : '-' }} </template>
            </el-table-column>
            <el-table-column label="外链">
                <template slot-scope="{ row }"> {{ row.link ? row.link : '-' }} </template>
            </el-table-column>
            <el-table-column sortable prop="updatedAt" :label="$t('table.updatedAt')" align="center">
                <template slot-scope="{ row }">
                    <span>{{ row.updatedAt | formatDate }}</span>
                </template>
            </el-table-column>

            <el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{ row }">
                    <el-button size="mini" @click="handleUpdate(row)">
                        {{ $t('table.edit') }}
                    </el-button>

                    <el-button v-if="row.status != 'deleted'" size="mini" type="danger" plain @click="handleDelete(row)">
                        {{ $t('table.delete') }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
import { config } from './config'
import { fetchList, remove } from '@/api/press'
import { formatDate } from '@/utils'

export default {
    name: 'ProductCategoryList',
    filters: {
        statusFilter(status) {
            return status ? 'success' : 'info'
        },
        formatDate(date) {
            return formatDate(date)
        },
    },
    data() {
        return {
            tableKey: 0,
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 10,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id',
                keyword: '',
            },
            downloadLoading: false,
            selectedRows: [],
        }
    },
    watch: {
        'listQuery.keyword'(value) {
            if (value.length <= 0) {
                this.getList()
            }
        },
    },
    created() {
        this.getList()
    },
    methods: {
        // 列表
        getList() {
            this.listLoading = true
            fetchList().then(res => {
                const { data = [] } = res
                this.list = data
                this.listLoading = false
            })
        },

        // 添加事件
        handleCreate() {
            this.$router.push(`${config.routePath}create`)
        },

        // 编辑信息
        handleUpdate(row) {
            console.log('config.routePath', config.routePath)
            this.$router.push({
                path: `${config.routePath}create`,
                query: { id: row.id },
            })
        },

        // 删除
        handleDelete(row) {
            let ids = []
            if (Array.isArray(row)) {
                ids = row.map(v => v.id)
            } else {
                ids.push(row.id)
            }

            this.handleClose(() => {
                remove({
                    ids,
                }).then(() => {
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000,
                    })
                    this.getList()
                })
            })
        },

        // 删除提醒
        handleClose(done) {
            this.$confirm('确认删除？')
                .then(() => {
                    done()
                })
                .catch(() => { })
        },

        // filter
        onFilter() {
            this.listQuery.page = 1
            this.getList()
        },
    },
}
</script>
  